<template>
  <div class="search">
    <div class="search-a">
      <div
        class="search-sila">
        <img
          src="../../assets/search/search.png"
          alt="加载错误"
          class="img-s">
        <div class="long">
        </div>
        <input class="b" v-model="name" />
        <img
          src="../../assets/search/Group 6.png"
          alt="加载错误"
          class="img-x">
      </div>
      <b class="dis">取消</b>
    </div>
    <ul
      class="classification">
      <li
        class="classification-a"
        style="color:#FC1541">
        <b>全部</b>
        <div
          class="Underscore">
        </div>
      </li>
      <li
        class="classification-b">
      </li>
      <li style="width: 24px;"
        class="classification-a">
        人
      </li>
      <li
        class="classification-b">
      </li>
      <li
        class="classification-a">
        车辆</li>
      <li
        class="classification-b">
      </li>
      <li
        style="border-right:none"
        class="classification-a">
        项目</li>
    </ul>
    <div class="chauffeur">
      <b
        class="left">华润-司机</b>
      <b class="right">更多</b>
      <hr>
      <ul class="list_a">
        <li><img
            src="../../assets/search/headPortrait.png"
            alt="加载错误">
          <p class="no-name">李
          </p>
          <p class="name">华润
          </p>
          <p
            class="phonenumber">
            13607726688</p>
          <div class="see">查看
          </div>
        </li>
        <li class="list-2">
          <img
            src="../../assets/search/headPortrait.png"
            alt="加载错误">
          <p class="name"
            style="left: 70px;">
            华润
          </p>
          <p
            class="phonenumber">
            13607726688</p>
          <div class="see">
            查看
          </div>
        </li>
        <li class=" list-3">
          <img
            src="../../assets/search/headPortrait.png"
            alt="加载错误">
          <p class="no-name">张
          </p>
          <p class="name">华润
          </p>
          <p
            class="phonenumber">
            13607726688</p>
          <div class="see">查看
          </div>
        </li>
      </ul>
    </div>
    <div class="division">
    </div>
    <div class="project">
      <div class="m-top">
        <p class="left">华润-项目部
        </p>
        <p class="right">更多
        </p>
        <hr>
      </div>
      <ul class="project-ul">
        <li><img
            src="../../assets/search/MatteMarbleLipstick.png"
            alt="">
          <p
            class="project-p-1">
            华润万象</p>
          <p
            class="project-p-2">
            456m</p>
        </li>
        <li
          style=" margin-top: 15px;">
          <img
            src="../../assets/search/MatteMarbleLipstick.png"
            alt="">
          <p
            class="project-p-3">
            华润二期</p>
          <p
            class="project-p-4">
            456m</p>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
export default {
  data(){
    return {
      name:'华润',
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  margin-top: 2%;
  width: 100%;
  height: 100vh;
  background-color: #FFFFFF;
  .search-a {
    position: relative;
    background-color: #fafbfd;
    .search-sila {
      width: 75vw;
      height: 30px;
      border: 1.5pt #fc1541 solid;
      border-radius: 0.571429rem;
      margin-left: 5%;
      position: relative;

      .img-s {
        position: absolute;
        top: 27%;
        left: 0.285714rem;
      }
      .img-x {
        position: absolute;
        top: 30%;
        left: 6.857143rem;
        opacity: 0.7;
      }
      .b {
        font-family: 苹方;
        font-size: 1.3em;
        position: absolute;
        top: 17%;
        left: 1.285714rem;
      }
      .long {
        width: 0.028571rem;
        height: 0.371429rem;
        border-right: 0.028571rem #c6c6c6 solid;
        position: absolute;
        top: 0.228571rem;
        left: 1rem;
      }
    }
    .dis {
      font-family: 苹方;
      font-size: 1.5em;
      color: #fc1541;
      position: absolute;
      top: 0.2rem;
      right: 5.66%;
    }
  }
  .classification {
    background-color: #fafbfd;
    .classification-a {
      font-family: 苹方;
      font-size: 1.3em;
      color: #dcdcdc;
      display: inline-block;
      padding: 3.73% 8.4% 3.73% 8.4%;
    }
    .classification-b {
      height: 0.342857rem;
      display: inline-block;
      border-right: 0.028571rem #dcdcdc solid;
    }
    .Underscore {
      width: 0.285714rem;
      height: 0.028571rem;
      border-bottom: 0.057143rem #fc1541 solid;
      border-radius: 0.028571rem;
      margin: 0 auto;
    }
  }
  .chauffeur {
    margin-top: 0.8rem;
    position: relative;
    .left {
      font-family: 苹方;
      font-size: 1.4em;
      float: left;
      margin-left: 0.428571rem;
    }
    .right {
      font-family: 苹方;
      font-size: 1.3em;
      float: right;
      color: #999999;
      margin-right: 0.428571rem;
    }
    hr {
      width: 90%;
      height: 0.028571rem;
      background-color: #f2f2f2;
      border-radius: 0.028571rem;
      border: none;
      position: absolute;
      top: 30.028571rem;
      left: 0.428571rem;
    }
    .list_a {
      width: 100%;
      height: 50%;
      position: absolute;
      top: 1.571429rem;
    }
    .list_a li {
      width: 100%;
      margin-bottom: 0.571429rem;
    }
    .list_a li img {
      margin-left: 0.4rem;
    }
    .name {
      font-family: 苹方;
      font-size: 1.4em;
      width: 1.428571rem;
      color: #fc1541;
      position: absolute;
      top: 0;
      left: 2.285714rem;
    }
    .no-name {
      font-family: 苹方;
      font-size: 1.4em;
      width: 1.428571rem;
      color: #4a4a4a;
      position: absolute;
      top: 0;
      left: 1.828571rem;
    }
    .phonenumber {
      position: absolute;
      left: 2rem;
      top: 0.628571rem;
    }
    .see {
      width: 1.714286rem;
      height: 0.7rem;
      position: absolute;
      right: 0.428571rem;
      top: 0;
      font-family: 苹方;
      font-size: 1.2em;
      border-radius: 5pt;
      background-color: #fff2f5;
      line-height: 0.7rem;
      text-align: center;
      color: #fc1541;
    }
    .list-2 {
      position: absolute;
      top: 1.714286rem;
    }
    .list-3 {
      position: absolute;
      top: 3.428571rem;
    }
  }
  .division {
    width: 100%;
    height: 0.228571rem;
    background-color: #f9f9f9;
    position: absolute;
    top: 54%;
  }
  .project {
    width: 100%;
    height: 100%;
    position: relative;
    top: 6.571429rem;
    .m-top {
      margin-top: 1.142857rem;
    }
    .left {
      display: inline-block;
      font-family: 苹方;
      font-size: 1.4em;
      position: absolute;
      left: 0.428571rem;
    }
    .right {
      display: inline-block;
      font-family: 苹方;
      font-size: 1.3em;
      color: #999999;
      position: absolute;
      right: 0.428571rem;
    }
    hr {
      width: 90%;
      height: 0.028571rem;
      background-color: #f2f2f2;
      border-radius: 0.028571rem;
      border: none;
      position: absolute;
      top: 1rem;
      left: 0.428571rem;
    }

    .project-ul {
      width: 100%;
      position: absolute;
      // background-color: rgb(206, 11, 11);
      top: 60px;
      left: 14px;
    }
    .project-ul li img {
      border: 0.028571rem #f2f2f2 dashed;
    }
    .project-p-1 {
      width: 100%;
      font-family: 苹方;
      font-size: 1.4em;
      color: #333333;
      position: absolute;
      top: 0%;
      left: 27%;
    }
    .project-p-2 {
      width: 100%;
      font-family: 苹方;
      font-size: 1.2em;
      color: #333333;
      position: absolute;
      top: 20%;
      left: 80%;
    }
    .project-p-3 {
      width: 100%;
      font-family: 苹方;
      font-size: 1.4em;
      color: #333333;
      position: absolute;
      top: 53%;
      left: 27%;
    }
    .project-p-4 {
      width: 100%;
      font-family: 苹方;
      font-size: 1.2em;
      color: #333333;
      position: absolute;
      top: 75%;
      left: 80%;
    }
  }
}
</style>
